<template>
  <view class='container'>
    <!-- 头部渐变背景 -->
    <view class="header">
      <view class="bg">
        <image src="../../static/task/bg.svg"/>
      </view>
      <statusBar bgColor="rgba(0,0,0,0)"></statusBar>
      <view class="go-back" @click="goBack">
        <image src="../../static/task/go-back.svg"/>
      </view>      
      <view class="my-beans">
        <text>我的潮豆</text>
        <text>29300</text>
      </view>
    </view>

    <!-- 签到和任务 -->
    <view class="con">
      <!-- 签到 -->
      <view class="sign-in">
        <view class="title">已连续签到<text>{{dataList.continuousSignCount}}</text>天</view>
        <view class="list">
          <view v-for="(item) in dataList.signInList" :key="item.id" :class="['item',item.isSignIn ? '' : 'not-signed']">
            <image v-if="item.isSignIn" src="../../static/task/sign-in.svg"/>
            <image v-else src="../../static/task/no-sign-in.svg"/>
            <image v-if="item.isSignIn" src="../../static/task/duigou.svg"/>
            <text v-else>+{{item.signPoint}}</text>
          </view>
        </view>
        <!-- 进度条 -->
        <view class="progress">
          <view class="line">
            <view 
              v-for="(item,index) in dataList.signInList" 
              :key="item.id" 
              :class="[index === 0 ? 'one' : 'line-item',item.isSignIn ? '' : 'no']" 
            >
                <view></view>
                <view v-if="index !== 0"></view>
            </view>
          </view>
          <view class="text">
            <view v-for="item in dataList.signInListText" :key="item">
              {{ 
                item
              }}
            </view>
          </view>
        </view>
        <view class="pre-integration" v-if="!dataList.isTodatSignIn" @click="toSignIn">签到领积分</view>
        <view class="pre-integration signed" v-else >今日已完成签到</view>
      </view>
      
      <!-- 日常任务 -->
      <view class="task">
        <view class="title">日常任务</view>
        <view class="list">
          <view class="item" v-for="item in dataList.everydayTask" :key="item.id">
            <view class="left">
              <image src="../../static/task/issue-posting.svg"/>
              <view>
                <text>{{item.newName}}</text>
                <text>完成进度<text>{{item.completeNumber}}</text>/{{item.totalNumber}}</text>
              </view>
            </view>
            <view class="right">
              <image src="../../static/task/sign-in.svg"/>
              <text>+{{item.integral}}</text>
              <view v-if="item.completeNumber === item.totalNumber" class="finished">已完成</view>
              <view v-else @click="toPerform(item.url)">去完成</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 新手任务 -->
      <view class="task">
        <view class="title">新手任务</view>
        <view class="list">
          <view class="item" v-for="item in dataList.newPeopleTask" :key="item.id">
            <view class="left">
              <image src="../../static/task/issue-posting.svg"/>
              <view>
                <text>{{item.newName}}</text>
                <text>完成进度<text>{{item.completeNumber}}</text>/{{item.totalNumber}}</text>
              </view>
            </view>
            <view class="right">
              <image src="../../static/task/sign-in.svg"/>
              <text>+{{item.integral}}</text>
              <view v-if="item.completeNumber === item.totalNumber" class="finished">已完成</view>
              <view v-else @click="toPerform(item.url)">去完成</view>
            </view>
          </view>
        </view>
      </view>

      <view class="safe-padding"></view>
    </view>
    
  </view>
</template>

<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import {taskListByUserId,signCount,signIn} from '@/api/task.js'
  import taskTypeEnum from '@/enums/taskTypeEnum.js'

  const dataList = reactive({
    // 日常任务
    everydayTask:[],
    //新手任务
    newPeopleTask:[],
    //签到情况
    signInList:[],
    //签到情况--下面的文字内容
    signInListText:[],
    //今天是否已经签到
    isTodatSignIn:false,
    //连续签到天数
    continuousSignCount:0
  })

  onMounted(() => {
    getTaskList()
    getSignCount()
  })

  const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}

  const getTaskList = async () => {
    let res = await taskListByUserId()
    // console.log('任务列表',res);
    dataList.everydayTask = res.filter(item => item.type == 1)[0].data.map(item => ({...item,newName:taskTypeEnum.getNameByValue(item.job)}))
    dataList.newPeopleTask = res.filter(item => item.type == 2)[0].data.map(item => ({...item,newName:taskTypeEnum.getNameByValue(item.job)}))
  }

  const getSignCount = async () => {
    let res = await signCount()
    console.log('签到统计情况',res);
    let newData = []
    let newTextData = ['']

    for(let i = 1; i <= 7; i++) {
      newData.push({
        id:i,
        isSignIn:false,
        signPoint:res.signPointConfigList[i-1].signPoint
      })
    }
    for(let i = 0; i < res.continuousSignCount; i++) {
      newData[i].isSignIn = true
    }
    //装文字
    for(let i = 0; i < res.continuousSignCount; i++) {
      newTextData[i] = '已签'
    }
    if(!res.sign){
      //今天没签到
      newTextData.push('今天')
      newTextData.push('明天')
      for (let i = newTextData.length; i < 7; i++) {
        newTextData.push(`${i+1}天`)
      }
    }else{
      //今天已经签到
      newTextData.push('明天')
      for (let i = newTextData.length; i < 7; i++) {
        newTextData.push(`${i+1}天`)
      }
    }
    dataList.signInListText = newTextData
    
    dataList.signInList = newData
    dataList.isTodatSignIn = res.sign
    dataList.continuousSignCount = res.continuousSignCount

    // console.log('newData',newData);
  }

  const toSignIn = async () => {
    let res = await signIn()
    console.log('签到结果',res);
    getSignCount()
  }

  const toPerform = (url) => {
    uni.navigateTo({
      url: url
    });
  }


</script>

<style lang='scss' scoped>
  .container{
    width: 100vw;
    height: 100vh;

    .header{
      width: 750rpx;
      height: 598rpx;
      position: relative;

      .bg{
        width: 750rpx;
        height: 598rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        image{
          width: 100%;
          height: 100%;
        }
      }

      .go-back{
        width: 750rpx;
        height: 88rpx;
        padding:0 30rpx;
        box-sizing: border-box;
        @include flex(row,flex-start);

        image{
          width: 40rpx;
				  height: 40rpx;
        }
      }

      .my-beans{
        width: 750rpx;
        padding: 42rpx 0 0 30rpx;
        box-sizing: border-box;
        @include flex(column,flex-start,flex-start);

        >text:nth-of-type(1){
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #1E2222;
          margin-bottom: 18rpx;
        }
        >text:nth-of-type(2){
          font-family: Roboto, Roboto;
          font-weight: bold;
          font-size: 56rpx;
          color: #1E2222;
        }
      }
    }

    .con{
      width: 750rpx;
      background: linear-gradient( 180deg, #ffffff00 0%, #F4F3F7 40%);
      margin:-180rpx auto 0 auto;
      padding-bottom: 20rpx;

      .sign-in{
        width: 690rpx;
        height: 472rpx;
        background: white;
        border-radius: 4rpx;
        margin: auto;
        padding: 24rpx;
        box-sizing: border-box;

        .title{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #1E2222;

          text{
            font-size: 30rpx;
            font-weight: 500;
          }
        }

        .list{
          width: 100%;
          height: 112rpx;
          margin: 30rpx 0 26rpx 0;
          @include flex(row,space-between);

          .item{
            width: 76rpx;
            height: 112rpx;
            background: #ECFEFF;
            border-radius: 4rpx;
            border: 2rpx solid #31F1FA;
            padding: 20rpx 18rpx;
            box-sizing: border-box;
            @include flex(column,space-between);

            >image:nth-child(1){
              width: 40rpx;
              height: 40rpx;
            }
            >image:nth-child(2){
              width: 24rpx;
              height: 24rpx;
            }
            >text{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #C0CDCE;
            }
          }

          .not-signed{
            padding: 20rpx 18rpx 16rpx 18rpx;
            border: none;
            background-color: #F4F4F4;
          }
        }

        .progress{
          width: 642rpx;
          margin: 20rpx 0;
          // background-color: skyblue;

          .line{
            width: 576rpx;
            height: 12rpx;
            // background-color: pink;
            margin: auto;
            @include flex(row,flex-start);

            .one{
              width: 12rpx;
              height: 12rpx;
              border-radius: 6rpx;
              background: #2B3B3C;
            }
            .line-item{
              width: 94rpx;
              height: 12rpx;
              position: relative;
              padding-top: 5rpx;
              box-sizing: border-box;

              >view:nth-child(1){
                width: 94rpx;
                height: 2rpx;
                background-color: #2B3B3C;
              }
              >view:nth-child(2){
                width: 12rpx;
                height: 12rpx;
                border-radius: 6rpx;
                background: #2B3B3C;
                position: absolute;
                top: 0;
                right: 0;
              }
            }
            .no{
              >view:nth-child(1){
                background-color: #F4F4F4;
              }
              >view:nth-child(2){
                background-color: #DEDEDE;
              }
            }
          }

          .text{
            width: 604rpx;
            // background-color: pink;
            margin: 20rpx auto 60rpx auto;
            @include flex(row,space-between);

            >view{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #6F7474;
            }
          }
        }

        .pre-integration{
          width: 400rpx;
          height: 84rpx;
          background: #1F2323;
          border-radius: 42rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #31F1FA;
          margin: auto;
          text-align: center;
          line-height: 84rpx;
        }

        .signed{
          background-color: #c4c4c4;
          color: white;
        }
      }

      .task{
        width: 690rpx;
        // height: 598rpx;
        background: #FFFFFF;
        border-radius: 4rpx;
        margin: 20rpx auto;
        padding: 30rpx 24rpx;
        box-sizing: border-box;

        .title{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
          margin-bottom: 48rpx;
        }

        .list{
          width: 100%;
          // height: 464rpx;
          @include flex(column,space-between,flex-start);

          .item{
            width: 100%;
            height: 80rpx;
            background-color: white;
            margin-bottom: 47rpx;
            @include flex(row,space-between);

            .left{
              @include flex(row,flex-start);
              image{
                width: 80rpx;
                height: 80rpx;
                margin-right: 16rpx;
              }

              >view{
                @include flex(column,space-between,flex-start);
                
                >text:nth-child(1){
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
                }
                >text:nth-child(2){
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #A9A7B3;

                  >text{
                    color:#333333 ;
                  }
                }
              }
            }

            .right{
              @include flex(row,flex-end);
              
              >image{
                width: 36rpx;
                height: 36rpx;
              }

              >text{
                font-family: Roboto, Roboto;
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
                margin-left: 8rpx;
              }
              >view{
                width: 132rpx;
                height: 52rpx;
                background: #1F2323;
                border-radius: 26rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #FFFFFF;
                text-align: center;
                line-height: 52rpx;
                margin-left: 60rpx;
              }

              .finished{
                background: #AEB8B8;
              }
            }
          }

          .item:last-child{
            margin-bottom: 0;
          }

        }
      }
    }
  }
</style>
